<template>
  <div class="index">
    <Location class="index-location" type="industry" />
    <div class="index-industry">
      <div class="index-industry-list">
        <div
          v-for="item in list.industryList"
          :key="item.id"
          class="index-industry-item"
          @click="handleIndustryDetails(item.id)"
        >
          <img
            class="index-industry-item-icon"
            src="@/assets/images/image(53).png"
          />
          <div class="index-industry-item-mid">
            <div class="index-industry-item-title">{{ item.title }}</div>
            <img
              v-if="item.is_guan == 1"
              class="index-industry-item-tag"
              src="@/assets/images/image(16).png"
            />
          </div>
          <div class="index-industry-item-time">{{ item.time }}</div>
        </div>
      </div>
      <div class="index-industry-pagination">
        <!-- <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination> -->
        <Pagination
          v-model:page="field.formData.page"
          v-model:row="field.formData.page_size"
          v-model:total="field.total"
          @changePage="field.handleChangePage"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ToastBottom, setObj, getObj } from "@/utils/index";
import { onMounted, computed, ref, reactive, toRefs, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
import Location from "@/components/location/index";
import Pagination from "@/components/pagination/index";

//获取路由
const $_route = useRoute();
const $_router = useRouter();
//获取接口
const $_api = inject("$api");
onMounted(() => {
  api.getIndustryList();
});
//获取接口
const api = reactive({
  getIndustryList: async () => {
    const results = await $_api.zixunList(field.formData);
    if (results && results.status > 0) {
      console.log(results);
      list.industryList = results.data;
    }
  },
});
const list = reactive({
  industryList: [],
});
const field = reactive({
  formData: {
    page: 1,
    page_size: 16,
  },
  total: 100,
  handleChangePage: page => {
    field.formData.page = page;
    api.getIndustryList();
  },
});
const handleIndustryDetails = id => {
  $_router.push({
    path: `/industryDetail/${id}`,
  });
};
</script>

<style lang="scss" scoped>
.index {
  @include flex(flex-start, center);
  flex-direction: column;
  margin: 5px auto 0;
  width: 1200px;
}
.index-location {
  flex-shrink: 0;
  width: 100%;
  height: 105px;
}
.index-industry {
  @include flex(flex-start, center);
  flex-direction: column;
  margin-top: 13px;
  margin-bottom: 20px;
  width: 100%;
}
.index-industry-list {
  @include flex(flex-start, flex-start);
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: 400px;
}
.index-industry-item {
  @include flex(flex-start, center);
  margin-bottom: 25px;
  flex-grow: 0;
  width: 50%;
  cursor: pointer;
}
.index-industry-item:nth-child(8n) {
  //   @include flex(flex-start, center);
  margin-bottom: 0px;
  //   width: 50%;
}
.index-industry-item:nth-child(-n + 8) {
  margin-right: 10px;
}
.index-industry-item:nth-child(n + 9) {
  margin-left: 10px;
}
.index-industry-item-icon {
  flex-shrink: 0;
  margin-right: 20px;
  width: 34px;
  height: 25px;
}
.index-industry-item-mid {
  @include flex(flex-start, center);
  @include text_cut_line;
  flex-grow: 1;
  margin-right: 6px;
  //   width: 100%;
}
.index-industry-item-title {
  //   flex-grow: 1;
  text-align: left;
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
  line-height: 25px;
}
.index-industry-item-tag {
  flex-shrink: 0;
  margin-left: 6px;
  width: 20px;
  height: 20px;
}
.index-industry-item-time {
  flex-shrink: 0;
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
  line-height: 25px;
}
</style>
